// 定义方向
$direction: (t top, r right, b bottom, l left);
@for $i from 2 through 30 {
  @each $type in m, p, v, h, a {
    // margin
    @if $type == m {
      @each $d in $direction {
        [m#{nth($d, 1)}-#{$i}] {
          margin-#{nth($d, 2)}: #{$i}px;
        }
      }
    }
    // padding
    @else if $type == p {
      @each $d in $direction {
        [p#{nth($d, 1)}-#{$i}] {
          padding-#{nth($d, 2)}: #{$i}px;
        }
      }
    }
    // 垂直方向
    @else if $type == v {
      [pv-#{$i}] {
        padding-top: #{$i}px;
        padding-bottom: #{$i}px;
      }
      [mv-#{$i}] {
        margin-top: #{$i}px;
        margin-bottom: #{$i}px;
      }
    }
    // 水平方向
    @else if $type == h {
      [ph-#{$i}] {
        padding-left: #{$i}px;
        padding-right: #{$i}px;
      }
      [mh-#{$i}] {
        margin-left: #{$i}px;
        margin-right: #{$i}px;
      }
    }
    // 四个方向
    @else {
      [pa-#{$i}] {
        padding: #{$i}px;
      }
      [ma-#{$i}] {
        margin: #{$i}px;
      }
    }
  }
}
